<style>
.drag-render-con {
  min-height: 500px;
  background-color: #171b22;
}

.drag-render__item {
  position: absolute;
}
.drag-render-s {
  width: 100%;
  overflow: overlay;
}
</style>

<template>
  <div class="drag-ssssss">
    <z-space column-gap="20px" >
      <div>比例</div>
      <el-slider
          style="width: 240px;"
          v-model="aspect" :min="1" :step="0.1" :max="2"
          @change="onChange"
      ></el-slider>
      <div>长度 {{previewWidth}}</div>
    </z-space>
    <div class="drag-render-s" :style="sconStyle" >
      <div
          v-if="reload"
          class="drag-render-con" style="position: relative;" :style="conStyle">
        <template  v-for="item in components">

          <z-drag-render
              :is-preview="true"
              class="drag-render__item"

              :style="getStyle(item)"
              :item="item"></z-drag-render>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import ZDragRender from "./ZDragRender";
import {PLAYGROUND_HEIGHT, PLAYGROUND_WIDTH} from "@example/views/drag/const";

export default {
  name: 'ZDragPreivew',
  components: {ZDragRender},
  props: {
    initData: null,
  },
  data() {
    return {
      reload: true,
      components: [],
      aspect: 1
    }
  },
  computed: {
    previewWidth() {
      return (PLAYGROUND_WIDTH * this.aspect)
    },
    previewHeight() {
      return (PLAYGROUND_HEIGHT * this.aspect)
    },
    sconStyle() {
      let ret = {
        // height: ( maxTop +  (maxPos ? maxPos.h : 0))  + 'px',
      }
      // if (mW > $el.clientWidth) {
      //   ret.width = mW + 'px'
      // }
      ret.height = PLAYGROUND_HEIGHT + 'px'

      return ret;
    },
    conStyle() {
      let $el = this.$el;
      let maxTop = 0;
      let maxPos = null;

      let maxRight = 0;
      let maxRightPos = null;
      if (this.components && this.components.length > 0) {

        this.components.forEach(com => {
          let pos = com.data.pos;
          if (pos.t > maxTop) {
            maxTop = pos.t;
            maxPos = pos;
          }

          if (pos.l > maxRight) {
            maxRight = pos.l;
            maxRightPos = pos;
          }
        });

        let mW = ( maxRight +  (maxRightPos ? maxRightPos.w : 0))

      }

      let ret = {
        // height: ( maxTop +  (maxPos ? maxPos.h : 0))  + 'px',
      }
      // if (mW > $el.clientWidth) {
      //   ret.width = mW + 'px'
      // }
      ret.width = this.previewWidth + 'px'
      ret.height = this.previewHeight + 'px'

      return ret;

    }
  },
  methods: {
    calcS(v, base = this.previewWidth) {
      // return (v / base * 100) + '%'
      return (v * this.aspect) + 'px'
    },
    getStyle(item) {
      let ret = {}
      ret.width = this.calcS(item.data.pos.w, this.previewWidth);
      ret.height = this.calcS(item.data.pos.h, this.previewHeight);
      ret.left = this.calcS(item.data.pos.l, this.previewWidth);
      ret.top = this.calcS(item.data.pos.t, this.previewHeight);
      ret['z-index'] = item.data.ZINDEX
      return ret;
    },
    onChange() {
      this.reload = false;
      this.$nextTick(() => {
        this.reload = true
      })
    }
  },
  mounted() {
    this.components = this.initData()
    console.log('components', this.components)
  }
}
</script>
